<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Gèrer les familles</title>
    </h:head>
    <body>
        <!--Header-->
        <header id="header">
            <ui:insert name="header" >
                <ui:include src="/template/header.xhtml" />
            </ui:insert>
        </header>
        <!--Fin Header-->
        <!--Contenu-->

        <!--Messages d'informations-->
        <p:growl sticky="2000" id="messages" showDetail="true"/>

        <h:panelGrid id="panelAjout" columns="1" cellpadding="5"> 
            <h:form>
                <p:commandButton id="effectsDialogButton" value="Ajouter une famille" onclick="PF('dlg3').show();" type="button" />  
            </h:form>
        </h:panelGrid>  
        <p:dialog header="Ajout d'une famille" widgetVar="dlg3" modal="true" showEffect="explode" hideEffect="bounce" height="350">   
            <h:form id="formulaire">
                <p:outputLabel value="Les champs notés * sont obligatoires " />
                <br /><br />    
                <p:outputLabel value="Nom de la famille * " />
                <p:inputText value="#{familleBean.famille.nomFamille}"  label="nom"/> 
                <br /><br /> 
                <p:commandButton value="Valider" actionListener="#{familleBean.ajouterFamille()}" update=":formTable:listeFamilles :messages"/>             
            </h:form>
        </p:dialog> 



        <!-- Lister et modifier -->
        <p:outputLabel value="Pour modifier, cliquer sur la cellule"  />
        <br/>

        <h:form id="formTable">
            <p:dataTable  id="listeFamilles" value="#{familleBean.lesFamilles}"  var="f" scrollRows="5"  
                          scrollable="true" liveScroll="true" scrollHeight="150" editable="true" editMode="cell">
                <p:ajax event="cellEdit" listener="#{familleBean.modifierFamille(f)}" update="listeFamilles :messages"/>
                <p:column headerText="Nom">
                    <!-- debut Edit de cellule-->
                    <p:cellEditor>
                        <f:facet name="output">  
                            <h:outputText value="#{f.nomFamille}" />  
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputText value="#{f.nomFamille}" style="width:100%"/>  
                        </f:facet>                     
                    </p:cellEditor>
                    <!-- fin Edit de cellule-->
                </p:column>
               
                <p:column headerText="Actions">
                    <!--Validation de suppression -->
                    <h:commandLink id="lnkDeleteUser" value="delete"
                                   onclick="if (!confirm('Etes vous sûr de vouloir supprimer cette famille?'))
                            return false"
                            action="#{familleBean.supprimerFamille(f)}"/>
                    <!--Fin Validation de suppression -->
                </p:column>
            </p:dataTable>
        </h:form>       
        <!--Fin Contenu-->
        <!--Footer-->
        <footer id="footer">
            <ui:insert name="footer" >
                <ui:include src="/template/footer.xhtml" />
            </ui:insert>  
        </footer>
        <!--Fin footer-->
    </body>
</html>
